<template>
  <view class="icon-container">
    <navbar :title="category ? category.title : ''"></navbar>
    <view class="body">
      <view class="card" v-if="icon">
        <image class="pic" :src="icon.img" mode="aspectFit" @click="previewImage(icon.img)"></image>
        <view class="title">{{ icon.title }}</view>
        <view class="f1" style="position: relative">
          <scroll-view scroll-y="true" style="position: absolute;left: 0;right: 0;top: 0;bottom: 0">
            <view v-if="icon.desc" class="desc">{{ icon.desc }}</view>
          </scroll-view>
        </view>

        <view class="question" @click="toQuestion">相关试题 {{ icon.count }}题</view>
      </view>
      <TiyanDialog :bottom="true"></TiyanDialog>
    </view>
  </view>
</template>

<script>
import navbar from '@/components/navbar'
import {mapActions} from 'vuex'
import TiyanDialog from "@/components/TiyanDialog.vue";

export default {
  components: {
    TiyanDialog,
    navbar
  },
  data() {
    return {
      icon: null,
      category: null,
      isPreview: false,//是否预览
    }
  },
  async onLoad({id, cateId, kemu}) {
    this.cateId = cateId
    this.kemu = kemu
    const res = await this.signInfo({cateId, id})
    this.icon = res.icon
    this.category = res.category
  },
  methods: {
    ...mapActions('question', ['signInfo']),
    toQuestion() {
      if (this.icon.count === 0) {
        return
      }
      //跳转做题详情
      uni.navigateTo({
        url: '/pages/detail/detail?type=icon_' + this.icon.id + '&title=' + this.icon.title + '&kemu=' + this.kemu,
      })
    },
    previewImage(img) {
      uni.previewImage({
        // 需要预览的图片链接列表。若无需预览，可以注释urls
        urls: [img],
        // 为当前显示图片的链接/索引值
        current: img,
        // 图片指示器样式
        indicator: 'default',
        // 是否可循环预览
        loop: true,
        showmenu: false,
      });
    },
  }
}
</script>

<style lang="scss">
.preview-container {
  display: flex;
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: black;
  top: 0;
  z-index: 99;
}

.icon-container {
  display: flex;
  flex-direction: column;
  position: fixed;
  background-color: #f9f9f9;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;

  .body {
    flex: 1;
    display: flex;

    .card {
      flex: 1;
      margin: 80upx;
      background-color: #fff;
      box-shadow: 0 2px 10px #0000001a;
      border-radius: 20upx;
      display: flex;
      flex-direction: column;

      .pic {
        width: 494upx;
        height: 280upx;
        margin-top: 100upx;
        align-self: center;
        margin-bottom: 66upx;
      }

      .title {
        font-size: 36upx;
        align-self: center;
        margin-bottom: 20upx;
      }

      .desc {
        margin: 0 52upx;
        font-size: 26upx;
        color: #525252;
        line-height: 50upx;
        flex: 1;
      }

      .question {
        color: #3073f6;
        height: 72upx;
        font-size: 26upx;
        border: 1px solid #3073f6;
        border-radius: 38upx;
        padding: 0 80upx;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 16upx;
        align-self: center;
        margin-bottom: 52upx;
      }
    }
  }

  .footer {
    height: 108upx;
    background-color: #fff;
  }
}
</style>
